<template>
  <div class="caseDrawerView" @scroll="scrollEvent">
    <div class="searchBox">
      <i class="iconfont el-icon-close close" @click="$emit('closeDrawer','casePopupShow')"></i>
      <div class="search">
        <i class="iconfont el-icon-search" @click="changeCase()"></i>
        <input v-model="keyword" @keyup.enter="changeCase()" placeholder="搜索案列关键字"/>
      </div>
    </div>
    <div class="selectBox">
      <el-select v-model="houseData.val" @change="changeCase()" placeholder="户型">
        <el-option
            v-for="item in houseData.list"
            :label="item.name"
            :value="item.value">
        </el-option>
      </el-select>
      <el-select v-model="areaData.val" @change="changeCase()" placeholder="面积">
        <el-option
            v-for="item in areaData.list"
            :key="item.value"
            :label="item.name"
            :value="item.value">
        </el-option>
      </el-select>
      <el-select v-model="styleData.val" @change="changeCase()" placeholder="风格">
        <el-option
            v-for="item in styleData.list"
            :key="item.id"
            :label="item.name"
            :value="item.id">
        </el-option>
      </el-select>
      <el-select v-model="offerData.val" @change="changeCase()" placeholder="预算">
        <el-option
            v-for="item in offerData.list"
            :key="item.value"
            :label="item.name"
            :value="item.value">
        </el-option>
      </el-select>
    </div>
    <status-text :status="caseData.status"></status-text>
    <div class="listBox" v-for="(item,idx) in caseData.data" :key="idx">
      <img class="leftImg" :src="item.thumb_url[0].path" alt="" v-if="item.thumb_url[0]">
      <div class="box">
        <div class="d1">{{item.title}}</div>
        <div class="d2">
          <span>{{ item.area }}㎡</span><i></i><span>{{ item.house_type }}</span><i></i><span>{{item.offer}}万</span>
        </div>
        <div class="d3" v-for="style in item.design_style">{{ style.name }}</div>
      </div>
      <div class="btn" @click="$emit('sendPopupMsg',item,'case');$emit('close')">
        <img src="../../assets/images/send.png" alt="">
        <img src="../../assets/images/send1.png" alt="">
      </div>
    </div>
    <status-text :status="4" v-if="caseData.noMore"></status-text>
  </div>
</template>

<script>
import StatusText from "../common/statusText";
export default {
  components: {StatusText},
  data() {
    return {
      houseData: {
        list: [],
        val: ''
      },
      areaData: {
        list:[],
        val: ''
      },
      styleData: {
        list: [],
        val: ''
      },
      offerData: {
        list:[],
        val: ''
      },
      keyword:'',
      caseData:{
        noMore:false,
        status:1,
        data:[],
        page:1,
        pagesize:10,
        total:''
      },
    }
  },
  created() {
    this.getOption();
    this.getCase();
  },
  methods: {
    scrollEvent(e){
      if( this.caseData.noMore){
        return false
      }
      let windowHeight = e.target.clientHeight;
      let scrollTop = e.target.scrollTop;
      let scrollHeight = e.target.scrollHeight;
      if (scrollTop + windowHeight >= scrollHeight) {
          this.caseData.page++
          this.getCase(true);
      }
    },
    changeCase(){
      this.caseData.page=1;
      this.caseData.noMore=false;
      this.getCase();
    },
    getOption(){
      this.$http.post('api/client/designer/designer/getOptionList').then(res=>{
          if(res.code===1){
            this.houseData.list=res.data.house_type;
            this.styleData.list=res.data.design_style;
            this.areaData.list=res.data.area_section;
            this.offerData.list=res.data.budget_section;
            this.houseData.list.unshift({name:'全部',value:null})
            this.styleData.list.unshift({name:'全部',id:null})
            this.areaData.list.unshift({name:'全部',value:null})
            this.offerData.list.unshift({name:'全部',value:null})
          }else {
            this.$message(res.msg)
          }
      }).catch(err=>{
        this.$message(err.msg ? err.msg : err.toString())
      })
    },
    getCase(paging) {
      if(!paging){
        this.caseData.page=1
      }
      this.$http.post('/api/root/kefuDesigner/DesignerCase', {
        keyword:this.keyword,
        bedroom_num:this.houseData.val,
        area:this.areaData.val,
        offer:this.offerData.val,
        style:this.styleData.val,
        page:this.caseData.page,
        pagesize:this.caseData.pagesize
      }).then(res => {
          if(res.code===1){
            if(this.caseData.page*this.caseData.pagesize>=res.data.count){
              this.caseData.noMore=true;
            }else {
              this.caseData.noMore=false;
            }
            if(paging){
              res.data.list.map(item => {
                this.caseData.data.push(item);
              });
            }else {
              this.caseData.data=res.data.list
            }
            this.caseData.status=2;
          }else {
            this.caseData.status=3;
            this.$message(res.msg)
          }
      }).catch(err => {
        this.caseData.status=3;
        this.$message(err.msg ? err.msg : err.toString())
      })
    },
  }
}
</script>

<style lang="less">
.caseDrawerView {
  padding: 0 30px;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  .searchBox {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .close {
      margin: 0 40px 0 7px;
      font-size: 24px;
      font-weight: 400;
      color: #0A0605;
    }

    .search {
      overflow: hidden;
      width: 446px;
      height: 33px;
      background: #F8F8F8;
      border-radius: 17px;
      display: flex;
      align-items: center;
      color: #939393;

      i {
        font-weight: 400;
        margin: 0 14px;
        font-size: 15px;
      }

      input {
        background: #F8F8F8;
        border: none;
        height: 100%;
        width: 100%;
        outline-style: none;
        font-size: 13px;
      }
    }
  }

  .selectBox {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
    .el-select{
      width: 120px;
    }
  }

  .listBox {
    height: 106px;
    display: flex;
    margin-bottom: 22px;
    justify-content: space-between;

    .leftImg {
      width: 106px;
      height: 106px;
      border-radius: 4px;
    }

    .box {
      flex: 1;
      margin-left: 20px;

      .d1 {
        height: 48px;
        line-height: 24px;
        font-size: 16px;
        font-weight: 400;
        color: #333333;
        word-break: break-all;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .d2 {
        color: #939393;
        font-size: 13px;
        margin-top: 10px;
        line-height: 16px;

        i {
          margin: 0 8px;
          border-left: 1px #939393 solid;
        }
      }

      .d3 {
        margin-right: 5px;
        float: left;
        margin-top: 10px;
        padding: 0 10px;
        line-height: 20px;
        background: #F9F6F3;
        border-radius: 9px;
        font-size: 12px;
        color: #A98F68;
        font-weight: 400;
        text-align: center;
      }
    }

    .btn {
      width: 38px;
      height: 106px;
      background: #F9F6F3;
      border: 1px solid #C3AB7C;
      opacity: 1;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-left: 30px;

      img {
        margin: 3px 0;
      }
    }
  }
}
</style>
